<template>
    <view class="content" :class="[{ noScroll : !isScroll }]">
		<view class="step-num">
			<view class="circle">
				<view class="title">今日步数</view>
				<count-up :num="stepNum" color="#26A1FF" width="40" height="100" fontSize="60" fontWeight="600"></count-up>
				<view class="get-run" v-if="!token || stepNum === 0" @tap="onGetRunData()">获取步数</view>
			</view>
		</view>
		<view class="rules" @tap="showRules()">规则</view>
		<view class="sign-write" @tap="getJoinedList()">打卡</view>
		
		<!-- 打卡赛列表 -->
		<view class="sign-list">
			<view class="sign-item" v-for="(item, index) in tabList[active].list" :key="item.id">
				<view class="top">
					<view class="left"><text class="text">{{ item.type }}日赛</text>（{{ item.signTime }}打卡）</view>
					<view class="right">完成{{ item.stepNum }}步后打卡</view>
				</view>
				<view class="center">
					<view class="title">本期瓜分奖池（币）</view>
					<view class="number">
						<text class="text">{{ parseInt(item.alreadyJoinedUserNumber) * parseInt(item.amount) }}</text>币
						<view class="join"><text class="text">{{ item.alreadyJoinedUserNumber }}</text>人参与</view>
					</view>
					<view class="desc">上期打卡率{{ item.successfulRate}}%，平均分得{{ item.reward }}币</view>
				</view>
				<view class="bottom">
					<view class="sign-btn" @tap="signUp(item, index)" v-if="item.joined === 0 && item.status === 0">报名瓜分奖池</view>
					<view class="sign-btn disabled" @tap="signUp(item, index)" v-if="item.joined === 1 && item.status === 0">报名成功</view>
				</view>
			</view>
			<!-- 商品骨架 -->
			<template v-for="i in ['a', 'b', 'c', 'd']">
				<view class="skeleton-wrap" v-if="
					tabList[active].list.length === 0 &&
					!tabList[active].finished &&
					!tabList[active].empty">
					<skeleton class="goods-skeleton" :loading="true" avatarShape="square" :row="4" avatarSize="254rpx"></skeleton>
				</view>
			</template>
		</view>
		
		<!-- 打卡教程 -->
		<view class="sign-course">
			<view class="title">
				<image class="icon" src="@/static/images/icon/sign.png"></image>
				<text class="text">打卡三部曲</text>
			</view>
			<image class="course" src="@/static/images/course.png"></image>
			<view class="course-step">
				<text class="text">报名</text>
				<text class="text">打卡</text>
				<text class="text">分币</text>
			</view>
			<button class="share-btn" open-type="share" hover-class="none" >
				<text class="text">邀请好友</text>
			</button>
		</view>
		
		<!-- 加载中插件 -->
		<view class="load-status">
			<load-more status="loading" color="#E8F7E1" iconType="circle" v-if="!tabList[active].finished && !tabList[active].empty"
					   :contentText="contentText"></load-more>
			<load-more status="noMore" color="#E8F7E1" v-if="tabList[active].finished" :contentText="contentText"></load-more>
			<empty v-if="tabList[active].empty" color="#E8F7E1" emptyText="暂无进行中的打卡赛~" emptyType="sign"></empty>
		</view>
		
		<!-- 回到顶部 -->
		<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
			<text class="iconfont icon-huidaodingbu"></text>
		</view>

		<!-- 活动规则 -->
		<popup ref="rulesPopup" @change="onPopupChange">
			<view class="rules-popup">
				<text class="iconfont icon-guanbi" @tap="$refs.rulesPopup.close()"></text>
				<view class="rules-title">
					<view class="text">打卡规则</view>
					<view class="line"></view>
				</view>
				<view class="rules-content">
					<text class="text" v-for="item in shareTemplate" :class="[{ bottom: item === '' }]">{{ item }}</text>
				</view>
			</view>
		</popup>
		
		<!-- 报名确认 -->
		<popup ref="signPopup" type="bottom" @change="onPopupChange">
			<view class="sign-popup">
				<view class="sign-content">
					<view class="head">
						<view class="title">报名打卡{{ activeItem.type }}日赛</view>
						<image src="@/static/images/icon/close.png" class="close" @tap="$refs.signPopup.close()"></image>
					</view>
					<view class="text">保证金：{{ parseInt(activeItem.amount) }}权益币</view>
					<view class="text">打卡时间：{{ activeItem.startDay }}~{{ activeItem.endDay }}</view>
					<view class="desc">运动打卡成功后退回保证金，同时瓜分打卡失败者的保证金作为打卡成功的奖励</view>
					<view class="desc"><text class="red">打卡成功次日8：00，保证金将原路退回。奖励权益币也将额外转入您的金币账户。</text></view>
					<view class="sign-btn" @click="signUpSubmit()">报名打卡</view>
				</view>
			</view>
		</popup>
		
		<popup ref="joinedPopup" type="bottom" @change="onPopupChange">
			<view class="joined-popup">
				<view class="joined-content">
					<view class="head">
						<view class="title">我的打卡</view>
						<image src="@/static/images/icon/close-black.png" class="close" @tap="$refs.joinedPopup.close()"></image>
					</view>
					<view class="joined-list">
						<view class="joined-item" v-for="(item, index) in joinedList">
							<view class="top">
								<view class="left"><text class="text">{{ item.signedUserCount }}</text>人已打卡</view>
								<view class="right">{{ item.alreadyJoinedUserNumber }}人参与，{{ parseInt(item.alreadyJoinedUserNumber) * parseInt(item.amount) }}币奖池</view>
							</view>
							<view class="bottom">
								<view class="left">
									<view class="sign-type">{{ item.type }}日赛</view>
									<view class="desc">
										<view class="num">达<text class="text">{{ item.stepNum }}</text>步打卡</view>
										<view class="time">{{ item.signTime }}打卡</view>
									</view>
								</view>
								<view class="right" :class="[{disabled : item.signed === 1 }]" @tap="signWriteOff(item)">{{ item.signed === 0 ? '打卡' : '已打卡'}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</popup>

		<!-- 快捷登录 -->
		<authorize ref="authorize" @authorizeSuccess="refresh"></authorize>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import Empty from "@/components/Empty";
	import Authorize from '@/components/Authorize';
	import Skeleton from '@/components/uni/Skeleton';
	import LoadMore from "@/components/uni/LoadMore";
	import Popup from '@/components/uni/Popup';
	import loader from '@/utils/mixin/loader';
	import CountUp from '@/components/uni/CountUp';
	import moment from '@/utils/packges/moment';
    export default {
        name: "index",
		mixins: [loader],
		components: {
			Empty,
			Authorize,
			LoadMore,
			Skeleton,
			Popup,
			CountUp
		},
		data() {
			return {
				isScroll: true,
				token: null,
				stepNum: 0,
				activeItem: {},
				shareTemplate: [],
				btnLock: false,
				joinedList: []
			}
		},
		onLoad() {
			this.initPage();
			
			this.$service.common.shareTemplate.list({
				type: 19
			}).then(res => {
				this.shareTemplate = res[0].split(' ');
			});
			
			uni.reportAnalytics('enter_daka', {
				enter_daka: 1
			});
		},
		onShow() {
			if (uni.getStorageSync('stepToken')) {
				this.$store.dispatch('getStepUserInfo');
				this.onGetRunData();
				this.token = uni.getStorageSync('stepToken');
			} else {
				this.token = null;
			}
			this.$store.dispatch('addVisitRecordUnAuthorized', { pageType : 14 });
		},
		computed: {
			...mapGetters(['stepUserInfo', 'conf'])
		},
		methods: {
			initPage() {
				uni.showLoading({
					title: '加载中...'
				});
				this.loadMore(this.tabList[0]);
			},
			beforeLoader() {
				this.service = this.$service.activity.sign.page();
				return true;
			},
			afterLoader() {
				this.tabList[this.active].list.forEach(item => {
					item.signTime = moment(item.startTime).format('MM月DD日');
					item.startDay = moment(item.startTime).format('YYYY.MM.DD HH:mm');
					item.endDay = moment(item.endTime).format('YYYY.MM.DD HH:mm');
				})
			},
			refresh() {
				this.token = uni.getStorageSync('stepToken');
				this.onRefresh(this.tabList[this.active]);
				this.onGetRunData();
			},
			// 获取步数授权&快捷登录
			onGetRunData() {
				if (!uni.getStorageSync('stepToken')) {
					this.$refs.authorize.open();
					return false;
				}
				let that = this;
				let countDate = moment().format('YYYY-MM-DD');
				my.getRunData({
					countDate: countDate, // 查询步数日期
					timeZone: 'Asia/Shanghai', // 查询步数时区
					success: (res) => {
						that.$service.common.step.runData({
							crypted: res.response
						}).then(res => {
							this.stepNum = Number(res);
						})
					}
				});
			},
			getJoinedList() {
				if (!uni.getStorageSync('stepToken')) {
					this.$refs.authorize.open();
					return false;
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$service.activity.sign.joinedList().then(res => {
					if (res.length > 0) {
						res.forEach(item => {
							item.signTime = moment(item.startTime).format('MM月DD日');
						})
						this.joinedList = res;
						this.$refs.joinedPopup.open();
						this.isScroll = false;
					} else {
						uni.showToast({
							title: '暂无待打卡的打卡赛',
							icon: 'none'
						});
					}
					uni.hideLoading();
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
					uni.hideLoading();
				});
				uni.reportAnalytics('click_daka', {
					click_daka: 1
				});
			},
			// 报名打卡赛
			signUp(item, index) {
				if (item.joined === 0 && item.status === 0) {
					// 报名打卡赛
					if (!uni.getStorageSync('stepToken')) {
						this.$refs.authorize.open();
						return false;
					}
					this.activeItem = item;
					this.$refs.signPopup.open();
					this.isScroll = false;
				}

				if (index < 3) {
					uni.reportAnalytics('click_daka' + (index + 1), {
						click_daka: 1
					});
				}
			},
			// 确认报名
			signUpSubmit() {
				uni.showLoading({
					title: '加载中...'
				});
				
				if (!this.btnLock) {
					this.btnLock = true;
					this.$service.activity.sign.signUp({
						id: this.activeItem.id
					}).then(res => {
						uni.hideLoading();
						
						uni.showToast({
							title: '报名成功，记得明日来打卡噢',
							icon: 'none'
						});
						this.$refs.signPopup.close();
						this.onRefresh(this.tabList[this.active]);
						
						this.btnLock = false;
						
						uni.reportAnalytics('click_daka_cg', {
							click_daka_cg: 1
						});
					}).catch(err => {
						uni.hideLoading();
						this.btnLock = false;
						uni.showToast({
							title: err.message,
							icon: 'none'
						});
					});
				}
			},
			// 核销打卡赛
			signWriteOff(item) {
				if (item.signed === 1) {
					return false;
				}
				// 核销打卡
				this.$service.activity.sign.sign({
					id: item.id
				}).then(() => {
					uni.showToast({
						title: '打卡成功',
						icon: 'none'
					});
					this.getJoinedList();
					
					uni.reportAnalytics('click_daka_cg2', {
						click_daka_cg2: 1
					});
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
			},
			onPopupChange(e) {
				if (!e.show) {
					this.isScroll = true;
				}
			},
			showRules() {
				this.$refs.rulesPopup.open();
				this.isScroll = false;
			}
		},
		onShareAppMessage() {
			uni.reportAnalytics('click_yaoqinghy', {
				click_yaoqinghy: 1
			});

			const { shareFriendMainTemplate, shareFriendMainSubtitleTemplate, shareImageUrl } = this.conf;

			return {
				title: shareFriendMainTemplate,
				content: shareFriendMainSubtitleTemplate,
				desc: shareFriendMainSubtitleTemplate,
				path: '/pages/sign/index',
				bgImgUrl: shareImageUrl,
			};
		},
    }
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	min-height: 100vh;
	background: #8CD86A url('https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20210202/682dad50-6538-11eb-b863-a34b783d106b.png') no-repeat center top;
	background-size: 100%;
	padding-top: 160rpx;
	box-sizing: border-box;
	&.noScroll {
		height: 100vh;
		overflow: hidden;
	}
	.step-num {
		width: 220rpx;
		height: 220rpx;
		background: rgba(255, 255, 255, 0.56);
		border-radius: 50%;
		margin: 0 auto 112rpx;
		@include flexBox(center, center);
		.circle {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			background: #fff;
			color: #26A1FF;
			@include flexBox(flex-start, center, column);
			.title {
				font-size: 26rpx;
				margin-bottom: 18rpx;
				padding-top: 32rpx;
			}
			.get-run {
				font-size: 20rpx;
				margin-top: -36rpx;
				z-index: 100;
			}
		}
	}
	.sign-write {
		width: 280rpx;
		height: 124rpx;
		background: url('https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20210201/24e386a0-6434-11eb-9da2-7522891836e9.png');
		background-size: 100% 100%;
		margin: -100rpx auto 0;
		text-align: center;
		line-height: 110rpx;
		color: #fff;
		font-size: 32rpx;
	}
	.rules {
		width: 88rpx;
		line-height: 48rpx;
		background: linear-gradient(148deg, #5BA3FF 0%, #5BA3FF 100%);
		text-align: center;
		border-radius: 50rpx 0 0 50rpx;
		color: #fff;
		font-size: 24rpx;
		position: fixed;
		right: 0;
		top: 40rpx;
	}
	.sign-list {
		width: 708rpx;
		margin: 0 auto;
		.sign-item {
			margin-top: 24rpx;
			background: #fff;
			padding: 18rpx 22rpx;
			border-radius: 16rpx;
			font-size: 28rpx;
			@include flexBox(center, center, column);
			.top {
				width: 100%;
				margin-bottom: 58rpx;
				@include flexBox(space-between, center);
				.left {
					color: #2A2A2A;
					.text {
						font-size: 36rpx;
						color: #333333;
					}
				}
				.right {
					color: #606060;
				}
			}
			.center {
				width: 100%;
				.title {
					text-align: center;
					color: #2A2A2A;
					margin-bottom: 10rpx;
				}
				.number {
					width: 100%;
					position: relative;
					text-align: center;
					.text {
						color: #373737;
						font-size: 64rpx;
						font-weight: 600;
						margin-right: 10rpx;
					}
					.join {
						position: absolute;
						bottom: 0;
						right: 10rpx;
						width: 178rpx;
						background: #F7F7F7;
						padding: 6rpx 0;
						text-align: center;
						border-radius: 50rpx;
						.text {
							font-size: 28rpx;
							font-weight: 500;
							color: #FF3030;
						}
					}
				}
				.desc {
					text-align: center;
					color: #949494;
					margin-top: 30rpx;
				}
			}
			.bottom {
				margin-top: 42rpx;
				.sign-btn {
					background: #439DFF;
					padding: 22rpx 62rpx;
					color: #fff;
					border-radius: 50rpx;
					&.disabled {
						background: #B5B5B5;
					}
				}
			}
		}
	}
	.sign-course {
		width: 708rpx;
		height: 340rpx;
		background: #fff;
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 0 36rpx;
		margin-top: 24rpx;
		box-sizing: border-box;
		@include flexBox(flex-start, center, column);
		.title {
			color: #26A1FF;
			width: 100%;
			padding: 22rpx 0 14rpx;
			border-bottom: 2rpx dashed rgba(112, 112, 112, 0.3);
			@include flexBox(flex-start, center);
			.icon {
				width: 34rpx;
				height: 33rpx;
			}
			.text {
				font-size: 28rpx;
				margin-left: 14rpx;
			}
		}
		.course {
			width: 452rpx;
			height: 69rpx;
			margin-top: 28rpx;
		}
		.course-step {
			width: 100%;
			color: #666666;
			font-size: 26rpx;
			margin : 8rpx 0;
			@include flexBox(center, center);
			.text {
				margin: 0 68rpx;
			}
		}
		.share-btn {
			width: 360rpx;
			height: 116rpx;
			background: url('https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201207/09861560-3830-11eb-bdbf-6b3d391835c0.png') no-repeat center center;
			background-size: 100% 100%;
			border: none;
			@include flexBox(center, center);
			&:after {
				border: none;
			}
			.text {
				margin-top: -10rpx;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
	}
	.skeleton-wrap {
		background: #fff;
		width: 704rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 16rpx;
	}
	.rules-popup {
		width: 550rpx;
		background: #fff;
		padding: 40rpx 30rpx;
		border-radius: 16rpx;
		position: relative;
		font-size: 24rpx;
		min-height: 300rpx;
		background: linear-gradient(180deg, #F3F9FF 0%, #FFFFFF 100%);
		.icon-guanbi {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			color: #000;
			font-size: 34rpx;
		}
		.rules-title {
			color: #333333;
			font-size: 36rpx;
			text-align: center;
			font-weight: 600;
			margin-bottom: 20rpx;
			.line {
				background: #439DFF;
				width: 92rpx;
				height: 14rpx;
				border-radius: 50rpx;
				margin: -14rpx auto 0;
			}
		}
		.rules-content {
			font-size: 26rpx;
			max-height: 620rpx;
			overflow: auto;
			@include flexBox(null, null ,column);
			.bottom {
				margin-bottom: 16rpx;
			}
		}
	}
	.sign-popup {
		width: 750rpx;
		height: 500rpx;
		border-radius: 16rpx 16rpx 0 0;
		background: linear-gradient(180deg, #F3F9FF 0%, #FFFFFF 100%);
		.sign-content {
			padding: 28rpx 24rpx;
			.head {
				margin-bottom: 30rpx;
				@include flexBox(space-between, center);
				.title {
					color: #439DFF;
					font-size: 36rpx;
				}
				.close {
					width: 48rpx;
					height: 48rpx;
				}
			}
			.text {
				font-size: 32rpx;
				color: #2A2A2A;
				margin-bottom: 10rpx;
			}
			.desc {
				font-size: 24rpx;
				color: #727272;
				margin-top: 20rpx;
				.red {
					color: #FF3030;
				}
			}
			.sign-btn {
				background: #439DFF;
				line-height: 82rpx;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				border-radius: 10rpx;
				margin-top: 30rpx;
			}
		}
	}
	.joined-popup {
		width: 750rpx;
		height: 810rpx;
		border-radius: 16rpx 16rpx 0 0;
		background: #F2F2F2;
		padding: 28rpx 24rpx 0;
		box-sizing: border-box;
		.joined-content {
			.head {
				margin-bottom: 30rpx;
				@include flexBox(space-between, center);
				.title {
					color: #1E1E1E;
					font-size: 36rpx;
				}
				.close {
					width: 48rpx;
					height: 48rpx;
				}
			}
			.joined-list {
				height: 700rpx;
				overflow-y: auto;
				.joined-item {
					width: 706rpx;
					height: 212rpx;
					margin-bottom: 20rpx;
					background: #fff;
					border-radius: 8rpx;
					.top {
						@include flexBox(space-between, center);
						.left {
							background: #D6EAFF;
							padding: 10rpx 20rpx;
							color: #3A3A3A;
							font-size: 26rpx;
							width: fit-content;
							.text {
								color: #FF3030;
							}
						}
						.right {
							color: #474747;
							font-size: 26rpx;
							margin-right: 20rpx;
						}
					}
					.bottom {
						padding: 32rpx;
						@include flexBox(space-between, center);
						.left {
							@include flexBox(center, center);
							.sign-type {
								color: #26A1FF;
								font-size: 40rpx;
								font-size: 600;
							}
							.desc {
								margin-left: 24rpx;
								font-size: 28rpx;
								.num {
									color: #2A2A2A;
									.text {
										color: #26A1FF;
									}
								}
								.time {
									margin-top: 20rpx;
								}
							}
						}
						.right {
							background: #439DFF;
							color: #fff;
							width: 110rpx;
							height: 54rpx;
							font-size: 26rpx;
							border-radius: 8rpx;
							text-align: center;
							line-height: 54rpx;
							&.disabled {
								background: #A8A8A8;
							}
						}
					}
				}
			}
		}
	}
}
</style>